<script lang="ts" setup>
import { ref } from "vue";
// 导入图标工具
import { Upload } from "@/utils/icons.js";
// 导入消息工具
import message from "@/utils/message.js";

// 企业配置数据
const config = ref({
    name: "",
    logo: "",
    industry: "",
    scale: "",
    address: "",
    contact: "",
    phone: "",
    email: "",
    website: "",
    description: "",
});

// 行业选项
const industries = ["互联网", "金融", "教育", "医疗", "制造业", "零售"];

// 规模选项
const scales = ["1-50人", "50-100人", "100-500人", "500-1000人", "1000人以上"];

const handleLogoUpload = (file: File) => {
    console.log("上传企业Logo:", file);
    // 这里添加实际的上传逻辑
    config.value.logo = URL.createObjectURL(file);
    message.success("Logo上传成功");
};

const submitConfig = () => {
    console.log("保存企业配置:", config.value);
    message.success("企业信息保存成功");
};
</script>

<template>
    <div class="config-container">
        <div class="header">
            <h2>企业信息配置</h2>
        </div>

        <el-form :model="config" label-width="120px" class="form-content">
            <el-form-item label="企业名称">
                <el-input v-model="config.name" placeholder="请输入企业名称" />
            </el-form-item>

            <el-form-item label="企业Logo">
                <el-upload action="#" :show-file-list="false" :auto-upload="false" :on-change="handleLogoUpload">
                    <el-button type="primary" :icon="Upload">上传Logo</el-button>
                    <template v-if="config.logo">
                        <img :src="config.logo" class="logo-preview" />
                    </template>
                </el-upload>
            </el-form-item>

            <div class="form-row">
                <el-form-item label="所属行业" class="form-col">
                    <el-select v-model="config.industry" placeholder="请选择">
                        <el-option v-for="item in industries" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>

                <el-form-item label="企业规模" class="form-col">
                    <el-select v-model="config.scale" placeholder="请选择">
                        <el-option v-for="item in scales" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
            </div>

            <el-form-item label="企业地址">
                <el-input v-model="config.address" placeholder="请输入企业详细地址" />
            </el-form-item>

            <div class="form-row">
                <el-form-item label="联系人" class="form-col">
                    <el-input v-model="config.contact" placeholder="请输入联系人姓名" />
                </el-form-item>

                <el-form-item label="联系电话" class="form-col">
                    <el-input v-model="config.phone" placeholder="请输入联系电话" />
                </el-form-item>
            </div>

            <div class="form-row">
                <el-form-item label="电子邮箱" class="form-col">
                    <el-input v-model="config.email" placeholder="请输入企业邮箱" />
                </el-form-item>

                <el-form-item label="企业官网" class="form-col">
                    <el-input v-model="config.website" placeholder="请输入企业官网地址" />
                </el-form-item>
            </div>

            <el-form-item label="企业简介">
                <el-input v-model="config.description" type="textarea" :rows="5" placeholder="请输入企业简介" />
            </el-form-item>

            <el-form-item class="form-actions">
                <el-button type="primary" @click="submitConfig">保存配置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
.config-container {
    padding: 20px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.header {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.form-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-col {
    flex: 1;
}

.form-actions {
    margin-top: 30px;
    text-align: center;
}

.logo-preview {
    margin-top: 10px;
    max-width: 200px;
    max-height: 100px;
    display: block;
}
</style>
